<template>
  <div class="write" id="excellentPoints">
    <!-- 物流信息 -->
    <div class="logisticsBox" v-if='this.logisticsFlag'>
      <div class="topList">
        <ul>
          <li class="topStep" @click='toShow'>
            <div class="leftStep">
              <p class="first">{{lastLogistics.logisticsInfo}}</p>
              <p class="font14">{{lastLogistics.timestamp}}</p>
            </div>
            <div class="rightStep">
              <img src="https://image.hezongyy.com/pcimage/bird/bird_showmore.png" alt="">
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="write_main">
      <div class="write_title">
        <img src="../../assets/image/dingwei.png" alt />
        <div class="title_rig">
          <div class="title_name">
            <span class="name">{{orderOtherData.consignee}}</span>
            <span class="tel">{{orderOtherData.mobile}}</span>
          </div>
          <span class="date">{{orderOtherData.address}}</span>
        </div>
      </div>
      <img class="Imgs" src="../../assets/image/bottom_shod.png" alt />
    </div>

    <div class="write_item">
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1" :content="tableData">
          <template #title>
            <div style="height:1.26rem;line-height:1.26rem; display:flex;">
              <span style="color:#222222">礼品信息</span>
              <van-icon name="收起" />
            </div>
          </template>
          <div class="goods_item" v-for="(v,i) in tableData" :key="i">
            <div class="goods_items">
              <img :src="v.pictrue" alt />
              <div class="goods_center">
                <span class="name">{{v.name}}</span>
                <div class="goods_bottom">
                  <span>
                    <img src="../../assets/image/moliy.png" alt />
                    {{v.subtotal}}
                  </span>
                  <span class="iiii">x{{v.quantity}}</span>
                </div>
              </div>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>

    <div class="footers">
      <div class="jifen_center">
        <span class="lipin">{{type!=2?'礼品积分':'爆品金'}}</span>
        <span class="li">
          <img src="../../assets/image/moliy.png" alt />
          <span>{{orderOtherData.totalPoint}}</span>
        </span>
      </div>
      <!-- <div class="footer">
        <div class="foot">
          <span class="aa">积分合计:{{orderOtherData.totalPoint}}</span>
          <div class="ti" @click='toPayOrder()'>提交订单</div>
        </div>
      </div>-->
    </div>
  </div>
</template>
<script>
import url from '../../axios/apiUrl'
// 引入api.js定义的方法index
// import { postRequest } from '../../api/index'
import { getRequest } from '../../api/indexGet'
export default {
  data () {
    return {
      routerID: 0,
      tableData: [], // 查看订单详情商品
      orderOtherData: {}, // 查看订单详情收货地址 付款方式==
      activeNames: ['1'],
      type: -1,
      logisticsList: {}, // 物流信息
      logisticsFlag: false, // 是否显示物流
      lastLogistics: {} // 最近的物流信息
    }
  },
  created () {
    this.routerID = this.$route.query.id
    this.type = this.$route.query.type
    getRequest(url.pointsOrderDetails + '/' + this.routerID).then((res) => {
      this.tableData = res.data.content.goodsInfos
      this.orderOtherData = res.data.content
    })
    getRequest(url.birdLogistics + '/' + this.routerID).then(res => {
      if (res.data.code == '000000') {
        this.logisticsList = res.data.content.expressInfo
        if (this.logisticsList.expressPathInfo) {
          if (this.logisticsList.expressPathInfo.length != 0) {
            this.lastLogistics = this.logisticsList.expressPathInfo[0]
            this.logisticsFlag = true
          }
        } else {
          this.$toast('暂时没有物流信息！')
        }
      } else {
        this.$toast(res.data.message)
      }
    })
  },
  methods: {
    // 查看更多物流信息
    toShow () {
      this.$router.push({
        path: '/logisticsDetails',
        query: { id: this.routerID}
      })
      // 本地
      // window.location.href='http://localhost:8081/#/logisticsDetails?id='+this.routerID
      // 测试
      // window.location.href = "http://192.168.0.99:10001/activityapp/#/logisticsDetails?id="+this.routerID;
      // 线上
      // window.location.href = "https://jfmallplus.hezongyy.com/#/logisticsDetails?id="+this.routerID;
    }
  }
}
</script>
<style lang="less" scoped>
.write {
  padding: 0;
  margin: 0;
  background: #eeeeee;
  .write_main {
    background: #ffffff;
    .write_title {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 1.28rem;
      padding-left: 0.2rem;
      padding-right: 0.2rem;
      img {
        width: 0.46rem;
        height: 0.46rem;
      }
      .title_rig {
        padding: 0.26rem;
        height: 1.2rem;
        line-height: 0.6rem;
        .title_name {
          line-height: 0.68rem;
          font-size: 0.3rem;
          color: #222222;
          // line-height: 0.3rem;
          font-weight: bold;
          .name {
            //   margin-right: 0.3rem;
          }
        }
        .date {
          color: #222222;
          font-size: 0.3rem;
        }
      }
    }
    .Imgs {
      height: 0.03rem;
      width: 100%;
    }
  }
  .logisticsBox{
    min-height: 100px;
    background-color: #fff;
    border-bottom: 1px solid #dadada;
    padding-top: 28px;
    .topList{
      .topStep{
        display: flex;
        justify-content: space-between;
        .leftStep{
          p{
            font-size: 28px;
            font-weight: bold;
            color: #3DBB2B;
          }
          .first{
            margin: 0 0 23px 32px;
          }
          .font14{
            margin: 0 0 28px 32px;
            font-size: 26px;
            font-weight: 400;
          }
        }
        .rightStep{
          margin-right: 16px;
          img{
            width: 46px;
            height: 46px;
          }
        }
      }
    }
  }
  .write_item {
    position: relative;
    // top: 1.6rem;
    // margin-top: 112px;
    overflow: hidden;
    border-top: 0.6rem solid #efefef;
    .van-cell--clickable {
      align-items: center;
    }
    .van-cell--clickable:active {
      align-items: center;
    }
    .goods_item {
      height: 2.2rem;
      .goods_items {
        display: flex;
        justify-content: center;
        padding: 0.2rem;
        img {
          width: 1.6rem;
          height: 1.6rem;
        }
        .goods_center {
          width: 6.6rem;
          padding-left: 0.3rem;
          padding-bottom: 0.95rem;
          border-bottom: 0.02rem solid #eeeeee;
          .name {
            font-size: 0.32rem;
            color: #343434;
            font-weight: bold;
          }
          .goods_bottom {
            bottom: 0;
            color: #1eb808;
            display: flex;
            justify-content: space-between;
            span {
              color: #1eb808;
              img {
                width: 0.3rem;
                height: 0.3rem;
              }
            }
            .iiii {
              color: #222222;
            }
          }
        }
      }
    }
  }

  .footers {
    width: 100%;
    background: #efefef;
    position: fixed;
    bottom: 0;
    right: 0;
    border-top: 0.6rem solid #efefef;
    z-index: 9999;

    .jifen_center {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 1rem;
      line-height: 1rem;
      background: #ffffff;
      border-bottom: 0.6rem solid #eeeeee;
      z-index: 6666;
      border: 0.02rem solid #efefef;
      .lipin {
        color: #222222;
        margin-left: 20px;
      }
      .li {
        margin-right: 20px;
        height: 1rem;
        line-height: 1rem;
        align-items: center;
        text-align: center;
        display: flex;
        justify-content: space-between;
        img {
          width: 0.62rem;
          height: 0.62rem;
          // position: absolute;
          // top: 50%;
          // margin-top: -0.26rem;
        }
        span{
          font-size: 26px;
          color: #1DB807;
          font-weight: bold;
        }
      }
    }
    .mmm {
      height: 1rem;
    }
    .footers {
      width: 100%;
      height: 1rem;
      display: flex;
      justify-content: flex-end;
      // justify-content: left;
      background: #ffffff;
      border: 0.02rem solid #efefef;
      align-items: center;
      .foot {
        display: flex;
        align-items: center;
        .aa {
          font-size: 0.38rem;
          color: #fe343c;
          font-weight: bold;
          margin-right: 0.3rem;
        }
        .ti {
          width: 2.4rem;
          height: 1rem;
          background: #1eb808;
          text-align: center;
          align-items: center;
          color: #ffffff;
          line-height: 1rem;
          font-size: 0.36rem;
        }
      }
    }
  }
}
#excellentPoints{
  .write_main {
    background: #ffffff;
    position: relative;
    .write_title {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 1.28rem;
      padding-left: 0.2rem;
      padding-right: 0.2rem;
      img {
        width: 0.46rem;
        height: 0.46rem;
      }
      .title_rig {
        padding: 0.26rem;
        height: 1.2rem;
        line-height: 0.6rem;
        .title_name {
          line-height: 0.68rem;
          font-size: 0.3rem;
          color: #222222;
          // line-height: 0.3rem;
          font-weight: bold;
          .name {
            //   margin-right: 0.3rem;
          }
        }
        .date {
          color: #222222;
          font-size: 0.3rem;
        }
      }
    }
    .Imgs {
      height: 0.03rem;
      width: 100%;
    }
  }
}
</style>
